<template>
  <view class="content">
    <view class="bottom-view" @click="clickAnimationView" style="display: flex; justify-content: center; align-items: center;">
      <view class="" style="position: relative; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;">
        <view class="" style="position: absolute; display: flex; justify-content: center; align-items: center;">
          <image :animation="animationData" style="width: 46px; height: 46px; border-radius: 23px;" :src="audioCoverImg"
                 mode="aspectFill"></image>
        </view>
        <canvas class="progress_bg" canvas-id="cpbg"></canvas>
        <canvas class="progress_bg" canvas-id="cpbar"></canvas>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: '',
  props: {

  },
  data() {
    return {
      animationData: {},
      audioCoverImg: '../../static/player/normal.png',
    }
  },
  created() {
    this.drawProgressbg()
    console.log("动画插件 已经onLoad");
  },
  mounted() {

  },
  methods: {
    updateInfo: function(img) {
      if (this.audioCoverImg != '../../static/player/normal.png') {
        return
      }
      this.audioCoverImg = img
    },
    // 绘制路径线
    drawProgressbg: function() {
      var ctx = uni.createCanvasContext('cpbg', this);
      ctx.setLineWidth(4);
      ctx.setStrokeStyle('#BFBFBF');
      ctx.setLineCap('round');
      ctx.beginPath();
      ctx.arc(25, 25, 21, 0, 2 * Math.PI, false);
      ctx.stroke();
      ctx.draw();
    },
    // 动态绘制圆环
    drawCircle: function(step) {
      var ctx = uni.createCanvasContext('cpbar', this);
      ctx.setLineWidth(4);
      ctx.setStrokeStyle('#FF5B45');
      ctx.setLineCap('butt');
      ctx.beginPath();
      // 参数step 为绘制的百分比
      if (step >= 1) {
        step = 2;
      } else {
        step = step * 2
      }
      // console.log(step);
      ctx.arc(25, 25, 21, 0, step * Math.PI, false);
      ctx.stroke();
      ctx.draw();
    },
    // 旋转中间的图片
    rotate: function(duration) {
      var animation = uni.createAnimation({
        duration: duration * 1000,
        timingFunction: 'linear',
      })
      this.animation = animation
      let deg = Number(360 * duration / 8).toFixed(0)
      animation.rotate(deg).step()
      this.animationData = animation.export()
    },
    // 停止图片旋转
    stopAnimation: function() {
      let that = this
      setTimeout(function(){
        var animation = uni.createAnimation({
          duration: 0,
          timingFunction: 'linear',
        })
        // let count = Number(360*this.currentDuration/8).toFixed(0)
        // let deg = count % 360
        animation.rotate(0).step()
        that.animationData = animation.export()
        console.log("停止转圈");
      },500)
    },
    // 点击事件
    clickAnimationView: function() {
      console.log("点击动画view");
      if (uni.getStorageSync('playStatus') == 'fm') {
        uni.navigateTo({
          url: '/pages/center/fmStory'
        })
      } else {
        uni.navigateTo({
          url: '/pages/center/playing'
        })
      }
    }
  }
}
</script>

<style>
.content {
  position: fixed;
  bottom: 12px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  z-index: 9999;
}

.progress_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  transform: rotate(-90deg);
}
</style>
